<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <h4 v-text="msg"></h4>

        <div v-html="msg1"></div>

        <a v-bind:href="msg2">百度一下~</a>

        <ul>
            <il v-for="item in music">{{item.name}}</il>
        </ul>
        <br>
        <ul>
            <il v-for="item in user">{{item}}</il>
        </ul>
        <div>
            <h4 v-show="showButton">v-show</h4>
            <button v-on:click="showButton=true">显示</button>
            <button v-on:click="showButton=false">隐藏</button>
        </div>
        <br>
        <div>
            <h4 v-if="ifButton">v-if</h4>
            <button v-on:click="ifButton=true">显示</button>
            <button v-on:click="ifButton=false">隐藏</button>
        </div>
    </div>


<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue",
            msg1:"<h2>hello vue</h2>",
            msg2:"https://www.baidu.com/",
            music:[
                {name:"有何不可"},
                {name:"十年"},
                {name:"阳光总在风雨后"}
            ],
            user:{
                name:"张三",
                age:18,
                sex:"男"
            },
            showButton:true,
            ifButton:true,
        }
    })
</script>
</body>
</html>